<template>
  <div class="pandect">
    <Module-title label="当前总览数据" :text="countTotal">
      <G-select
        slot="right"
        v-model="queryParams.department_id"
        :options="deptList"
        @change="getCount"
      />
    </Module-title>
    <div class="pandect-content">
      <div v-for="(i, k) in dataList" :key="k" class="pandect-item">
        <div class="pandect-value">
          {{ formatCurrency(i.num, i.unit == "万") }}
          <span v-if="i.unit" style="font-size: 60%">{{ i.unit }}</span>
        </div>
        <div class="pandect-label">{{ i.label }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatCurrency, animateNumber } from "@/utils/common";
import { getDiveceStatistics } from "@/utils/srceen";
export default {
  name: "pandect-srceen",
  props: {
    // 科室列表
    deptList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      queryParams: {
        department_id: "",
      },
      countTotal: "资产总额：0元", // 统计内容
      dataList: [
        { label: "设备总数", value: "equipment", num: 0, unit: "" },
        { label: "科室总数", value: "department", num: 0, unit: "" },
        { label: "使用中设备数", value: "use_equipment", num: 0, unit: "" },
        { label: "库房中设备数", value: "kfz_equipment", num: 0, unit: "" },
        { label: "待报废设备数", value: "dbf_equipment", num: 0, unit: "" },
        { label: "已报废设备数", value: "ybf_equipment", num: 0, unit: "" },
        { label: "保内设备数", value: "bn_equipment", num: 0, unit: "" },
        { label: "保外设备数", value: "bw_equipment", num: 0, unit: "" },
      ],
    };
  },
  computed: {
    formatCurrency() {
      return formatCurrency;
    },
  },
  watch: {
    deptList: {
      handler(val) {
        if (val.length) {
          this.queryParams.department_id = val[0].id;
          this.getCount();
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 获取统计数据
    getCount() {
      getDiveceStatistics(this.queryParams).then((res) => {
        if (res && res.code == 1) {
          let total = res.data.all_property || 0;
          if (total >= 10000) {
            this.countTotal = `资产总额：${parseFloat(total / 10000, 2).toFixed(2)}万`;
          } else {
            this.countTotal = `资产总额：${total}元`;
          }
          this.$emit("total", res.data.total_property || 0);
          this.dataList.forEach((item) => {
            let max = res.data[item.value] || 0;
            if (max >= 10000) {
              max = max / 10000;
              item.unit = "万";
            }
            let params = {
              end: max,
            };
            animateNumber(params, (value) => {
              item.num = value;
              this.$forceUpdate();
            });
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.pandect {
  width: 100%;
  height: 238px;
  &-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 6px;
    padding: 20px;
  }
  &-item {
    height: 90px;
    background: url("../../../assets/count-light-bg.png") no-repeat;
    background-size: 100% 100%;
    .pandect-value {
      font-family: DS-DIGIB;
      font-size: 24px;
      color: #00fcff;
      text-align: center;
    }
    .pandect-label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 13px;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
